import { defineComponent } from "vue";
import Ranking from "./components/ranking/ranking";
import Statistics from "./components/statistics/statistics";
import "./alarm.scss";
export default defineComponent({
	emits: [],
	setup() {
		const active = ref("statistics");
		return () => {
			return (
				<div class="alarm-monitor">
					<div class="monitor-head">
						<el-radio-group v-model={active.value} class="mb-6">
							<el-radio label="statistics" border>
								告警统计
							</el-radio>
							<el-radio label="ranking" border>
								告警排行
							</el-radio>
						</el-radio-group>
					</div>

					{active.value == "statistics" ? <Statistics /> : null}
					{active.value == "ranking" ? <Ranking /> : null}
				</div>

				// <el-tabs class="alarm-monitor-tabs" v-model={active.value}>
				// 	<el-tab-pane label="告警统计" name="statistics">
				// 		{active.value == "statistics" && <Statistics />}
				// 	</el-tab-pane>
				// 	<el-tab-pane label="告警排行" name="ranking">
				// 		<Ranking />
				// 	</el-tab-pane>
				// </el-tabs>
			);
		};
	}
});
